<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/global.css">
		<link rel="stylesheet" href="css/mui.min.css">
			<script src="js/getURLParam.js"></script>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			p {
				text-indent: 22px;
			}
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			.mui-off-canvas-left {
				color: #fff;
			}
			.title {
				margin: 35px 15px 10px;
			}
			.title+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			}
			input {
				color: #000;
			}
			<style>
			
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
			
			.zhankai {
				width: 100%;
				height: 100%;
				border: 0;
				overflow:auto;
				
			
			}
		</style>
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon "><img src="images/drawable-xxhdpi/footer_vehicle_1.png" style="width:20px;height:20px;"></img></span>
				<span class="mui-tab-label">车辆</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon "><img src="images/drawable-xxhdpi/footer_vehicledistribution_1.png" style="width:20px;height:20px;"></img></span>
				<span class="mui-tab-label">地图</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon "><img src="images/drawable-xxhdpi/footer_warning_1.png" style="width:20px;height:20px;"></img></span>
				<span class="mui-tab-label">提醒</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon " ><img src="images/drawable-xxhdpi/footer_report_1.png" style="width:20px;height:20px;"></img></span>
				<span class="mui-tab-label">报告</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-expert">
				<span class="mui-icon "><img src="images/drawable-xxhdpi/zhanghu.png" style="width:20px;height:20px;"></img></span>
				<span class="mui-tab-label">专家</span>
			</a>
		</nav>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable" >
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left" >
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll"  >
						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
							<li class="mui-table-view-cell">
								<button class="mui-navigate-right"  id="note1" class="" onclick="gonote1()"  style="width:120%;height:100%;background-color:#333;border:0px; color: white;text-align: left;">通知开关</button>
									
							</li>
							<li class="mui-table-view-cell">
									<button class="mui-navigate-right"  id="note2" class="" onclick="gonote2()"  style="width:120%;height:100%;background-color:#333;border:0px; color: white;text-align: left;">关于我们</button>
								
							</li>
							<li class="mui-table-view-cell">
									<button class="mui-navigate-right"  id="note3" class="" onclick="gonote3()"  style="width:120%;height:100%;background-color:#333;border:0px; color: white;text-align: left;">用户反馈</button>
								
							</li>
							<li class="mui-table-view-cell">
									<button class="mui-navigate-right"  id="note4" class="" onclick="gonote4()"  style="width:120%;height:100%;background-color:#333;border:0px; color: white;text-align: left;">账户设置</button>
							</li>
							
						</ul>
					</div>
				</div>
			</aside>
			<!--主界面部分-->
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav " style="background-color: #FE0000">
					<a href="#offCanvasSide" class="   mui-pull-left"><img style="width:35px;height: 45px;" src="images/drawable-hdpi/head_menu.png"></img></a>
					
					<h1 id="zhuti" class="mui-title">车辆</h1>
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="margin-top: 0px;margin-left: 0px;">
					<div class="mui-scroll">
						<div class="mui-content">
							<div id="tabbar" class="mui-control-content mui-active">
								<iframe id="test1" style="border: hidden;width: 100%;height: 1500px;zoom: 35%;" scrolling="no"  class="zhankai" src="#"></iframe>
							</div>
							<div id="tabbar-with-chat" class="mui-control-content">
								<iframe id="test2" style="border: hidden;width: 100%;height: 1500px;zoom: 35%;" scrolling="no"   src="#"></iframe>
								
							</div>
							<div id="tabbar-with-contact" class="mui-control-content">
								<iframe  id="test3" style="border: hidden;width: 100%;height: 1500px;zoom: 35%;" scrolling="no"   src="#"></iframe>
							</div>
							<div id="tabbar-with-map" class="mui-control-content">
								<iframe  id="test4" style="border: hidden;width: 100%;height: 1500px;zoom: 35%;" scrolling="no"  src="#"></iframe>
							</div>
							<div id="tabbar-with-expert" class="mui-control-content">
								<iframe  id="test5" style="border: hidden;width: 100%;height: 1500px;zoom: 33.5%;" scrolling="no"   src="#"></iframe>
							</div>
						</div>

					</div>
				</div>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
		
			mui.init();
			var accountid=GetQueryString("accountId");
	        var proversion = GetQueryString("proVersion");
	        var sessionid = GetQueryString("sessionid");
	       var isTruck = GetQueryString("isTruck");
			document.getElementById("test1").src=("pages/vcllist/vehicle_list.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid);
			document.getElementById("test2").src=("pages/maplist/map2.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid+"&isTruck="+isTruck);
			document.getElementById("test3").src=("pages/msglist/msglist.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid);
			document.getElementById("test4").src=("pages/report/report.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid);
			document.getElementById("test5").src=("pages/expert/expertvcllist.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid);
			
			function gonote1(){
				window.location.href="pages/leftList/notifySwitch.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid;				
			}
			function gonote2(){
				window.location.href="pages/leftList/about.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid;
			}
			function gonote3(){
				window.location.href="pages/leftList/yijianfan.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid;
			}
			function gonote4(){
				window.location.href="pages/leftList/set_account.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid;
			}
			/*document.getElementById("note2").href=("pages/leftList/about.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid);
			document.getElementById("note3").href=("pages/leftList/yijianfan.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid);
			document.getElementById("note4").href=("pages/leftList/set_account.html?sessionid="+sessionid+"&proVersion="+proversion+"&accountId="+accountid);
			*/
			//侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			 //主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			 //菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");
			if (!mui.os.android) {
				
				var spans = document.querySelectorAll('.android-only');
				for (var i = 0, len = spans.length; i < len; i++) {
					spans[i].style.display = "none";
				}
			}
			 //移动效果是否为整体移动
			var moveTogether = false;
			 //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
			var classList = offCanvasWrapper[0].classList;
			 //变换侧滑动画移动效果；
			mui('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					offCanvasSide.classList.remove('mui-transitioning');
					offCanvasSide.setAttribute('style', '');
					classList.remove('mui-slide-in');
					classList.remove('mui-scalable');
					switch (this.value) {
						case 'main-move':
							if (moveTogether) {
								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
							}
							break;
						case 'main-move-scalable':
							if (moveTogether) {
								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
							}
							classList.add('mui-scalable');
							break;
						case 'menu-move':
							classList.add('mui-slide-in');
							break;
						case 'all-move':
							moveTogether = true;
							//整体滑动时，侧滑菜单在inner-wrap内
							offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
							break;
					}
					offCanvasWrapper.offCanvas().refresh();
				}
			});
			 
			
			 //主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			 //实现ios平台原生侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
			var title = document.getElementById("zhuti");
			 //选项卡点击事件
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');
				//更换标题
				title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
				//显示目标选项卡
				//若为iOS平台或非首次显示，则直接显示
				if(mui.os.ios||aniShow[targetTab]){
					plus.webview.show(targetTab);
				}else{
					//否则，使用fade-in动画，且保存变量
					var temp = {};
					temp[targetTab] = "true";
					mui.extend(aniShow,temp);
					plus.webview.show(targetTab,"fade-in",300);
				}
				//隐藏当前;
				plus.webview.hide(activeTab);
				//更改当前活跃的选项卡
				activeTab = targetTab;
			});
			
		</script>
	</body>

</html>